<template>
  <view class="pdf-preview">
    <image v-if="search" src="../static/images/home/open.svg" class="icon" @click="rightPopup"></image>
    <!--      顶部右边筛选-->
    <image :src="screenFlag ? '../static/images/home/screen_blue.svg' : '../static/images/home/screen_gray.svg'" mode="" class="rightScreen" @click="openPopup"></image>
    <image :src="searchFlag ? '../static/images/home/search_blue.svg' : '../static/images/home/search_gray.svg'" mode="" class="rightScreen" @click="openSearchPopup"></image>
      <zmm-watermark :watermark="watermark" :margin="40"></zmm-watermark>
    <image v-if="!rowParagraphs" src="../static/images/empty.svg" class="empty_img"></image>
    <uni-card :is-shadow="false" v-for="(item, index) in rowParagraphs" :key="'uni-card' + index" class="uni-card-table">
      <view class="table-row table_sort">
        <image src="../static/images/home/table_sort.svg" class="table_icon"></image>
        <view class="table-content">序号：{{ item.texts[0] }}</view>
        <view v-if="!item.isOpen" class="table-btn" @click="changeMore(item, index)"> <text>展开</text> <image src="../static/images/home/table_gray.svg" class="table_gray"></image></view>
        <view v-else class="table-btn" style="color: #0084ff" @click="changeMore(item, index)"> <text>收起</text> <image src="../static/images/home/table_blue.svg" class="table_blue"></image></view>
      </view>
      <view class="table-row" v-if="item.isOpen">
        <view class="table-label">专业分类：</view>
          <view class="table-content"
                :class="item.isOpen && currentCell === 1 && currentRow === index ? 'lightColor' : ''">{{ item.texts[1]
              }}
          </view>
      </view>
      <view class="table-row">
        <view class="table-label">工艺项目：</view>
        <view class="table-content"
              :class="item.isOpen && currentCell === 2 && currentRow === index ? 'lightColor' : ''">{{ item.texts[2] }}
        </view>
      </view>

      <view class="table-row" v-if="item.isOpen">
        <view class="table-label">分级：</view>
          <view class="table-content"
                :class="item.isOpen && currentCell === 3 && currentRow === index ? 'lightColor' : ''">{{ item.texts[3]
              }}
          </view>
      </view>
      <view class="table-row" v-if="item.isOpen">
        <view class="table-label">禁（限）用工艺内容：</view>
          <view class="table-content"
                :class="item.isOpen && currentCell === 4 && currentRow === index ? 'lightColor' : ''">{{ item.texts[4]
              }}
          </view>
      </view>
      <view class="table-row" v-if="item.isOpen">
        <view class="table-label">禁（限）用原因：</view>
          <view class="table-content"
                :class="item.isOpen && currentCell === 5 && currentRow === index ? 'lightColor' : ''">{{ item.texts[5]
              }}
          </view>
      </view>
      <view class="table-row" v-if="item.isOpen">
        <view class="table-label">应采取的措施：</view>
          <view class="table-content"
                :class="item.isOpen && currentCell === 6 && currentRow === index ? 'lightColor' : ''">{{ item.texts[6]
              }}
          </view>
      </view>
      <view class="table-row" v-if="item.isOpen">
        <view class="table-label">编制依据：</view>
          <view class="table-content"
                :class="item.isOpen && currentCell === 7 && currentRow === index ? 'lightColor' : ''">{{ item.texts[7]
              }}
          </view>
      </view>
      <view class="table-row" v-if="item.isOpen">
        <view class="table-label">来源：</view>
          <view class="table-content"
                :class="item.isOpen && currentCell === 8 && currentRow === index ? 'lightColor' : ''">{{ item.texts[8]
              }}
          </view>
      </view>
      <view class="table-row" v-if="item.isOpen">
        <view class="table-label">应用说明：</view>
          <view class="table-content"
                :class="item.isOpen && currentCell === 9 && currentRow === index ? 'lightColor' : ''">{{ item.texts[9]
              }}
          </view>
      </view>
      <view class="table-row table-row-image" v-if="item.isOpen">
        <view class="table-label">参考图片：</view>
        <view class="table-content">
          <image class="text_image" mode="widthFix" v-for="(ima, k) in item.related_images" :key="'ima' + k" @click="previewImage($config.baseUrl + ima)" :src="$config.baseUrl + ima"></image>
        </view>
      </view>
    </uni-card>
    <view class="collect_or_likes" v-if="showCollects">
      <view class="collect_or_like">
        <text>点赞</text>
        <image @click="likeFn(info)" :src="info.like === 1 ? '../static/images/home/heart_fill.png' : '../static/images/home/heart.png'"></image>
        <text v-if="info.likeNumber">{{ info.likeNumber }}</text>
      </view>
      <view class="collect_or_like">
        <text>收藏</text>
        <image @click="collectionFn(info)" :src="info.collect === 1 ? '../static/images/start1.svg' : '../static/images/start.svg'"></image>
        <text v-if="info.collectNumber">{{ info.collectNumber }}</text>
      </view>
    
    </view>
    <!-- <u-empty mode="data" v-if="rowParagraphs && rowParagraphs.length === 0"></u-empty> -->
    <!--        筛选-->
    <u-popup :show="show" @close="closePopup" :round="10" mode="bottom">
      <view class="popupTitle">
        <u-icon name="arrow-down" @click="closePopup"></u-icon>
        <view>筛选</view>
        <view></view>
      </view>

      <view class="popupCon">
        <view class="input-with-select">
          <uni-data-select v-model="rangeValue" @change="filterRowParagraphs" :clear="false" :localdata="range"> </uni-data-select>

          <uni-easyinput class="uni-mt-5" trim="left" v-model="inpVal" @input="inputChange" placeholder="请输入搜索内容"></uni-easyinput>
        </view>
        <view class="checkboxTop">
          <u-checkbox-group v-model="checkAll" placement="row" @change="handleCheckAll">
            <u-checkbox name="1" label="全选"></u-checkbox>
          </u-checkbox-group>
          <u-checkbox-group v-model="inverse" placement="row" @change="handleInverse">
            <u-checkbox name="1" label="反选"></u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="checkboxBottom">
            <u-checkbox-group v-model="checked" placement="column" @change="handleCheckedLists">
                <u-checkbox v-for="(value, key, index) in checkedList" :key="'checkbox' + index" :name="key"
                            @change="params => handleCheckedList(params,key)"
                            :label="key + '(' + value + ')'"></u-checkbox>
            </u-checkbox-group>
        </view>
      </view>

      <view class="bottom">
        <u-button text="清空" @click="emptyFn"></u-button>
        <u-button type="primary" text="确定" @click="sureFn"></u-button>
      </view>
    </u-popup>

    <!--        搜索筛选-->
    <u-popup :show="showSearch" class="search_u_popup" @close="closeSearchPopup" :round="10" mode="bottom">
      <view class="popupTitle">
        <u-icon name="arrow-down" @click="closeSearchPopup"></u-icon>
        <view>搜索</view>
        <view></view>
      </view>
      <view class="popupCon">
        <uni-easyinput class="uni-mt-5" trim="left" v-model="inpValWords" placeholder="请输入搜索内容"></uni-easyinput>
        <view class="checkboxBottom">
          <u-radio-group v-model="searchChecked" placement="column" @change="handleLight">
            <u-radio v-for="(item, index) in searchCheckedList" :key="'checkbox' + index" :name="item.id + item.row + item.cell">{{ item.texts }}</u-radio>
          </u-radio-group>
        </view>
      </view>
    </u-popup>

    <!--      关键字列表-->
    <u-popup :show="showRight" mode="right" @close="closeFn" @open="openFn" class="keywords">
      <view class="keyword">
        <view class="image">
          <image src="../static/images/home/close.svg" @click="closeFn"></image>
        </view>
        <view class="content">
          <view class="model model-title"><image src="../static/images/home/model-title.svg"></image>关键字列表</view>
          <view class="scroll_view">
            <view :class="knowledgeIndex == index ? 'active' : ''" class="model" @click="knowledgeFn(item, index)" v-for="(item, index) in items" :key="index"> <image src="../static/images/home/model.svg"></image>{{ item.text }} </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 检索结果后处理的问题 -->
    <view v-if="highlightedContent != ''" v-html="highlightedContent"></view>
    <view v-else class="mainContent">
      <template v-for="(item, index) in dataInfo.content">
        <view class="h0" v-if="item.tag == 'h0'">
          <view class="title">{{ item.paragraphs[item.paragraphs.length - 1] }}</view>
        </view>
        <view class="h1" v-if="item.tag == 'h1'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text" v-if="H.node_type == 'paragraph'">
              {{ filterFn(item.paragraphs[H.node_index]) }}
            </view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <image class="text_image" mode="widthFix" v-show="item.images[H.node_index].remote_content" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index]">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>
        <view class="h2" v-if="item.tag == 'h2'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index]">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h3" v-if="item.tag == 'h3'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index]">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h4" v-if="item.tag == 'h4'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index]">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h5" v-if="item.tag == 'h5'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index]">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h6" v-if="item.tag == 'h6'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index]">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: "preview",
  data() {
    return {
      showCollects: true,
      info: {},
      show: false, //筛选弹窗
      showSearch: false, //搜索筛选弹窗
      showRight: false,
      value: "",
      rangeValue: null,
      range: [],
      items: [],
      rowParagraphs: [],
      jsonData: {
        content: [],
        metadata: {},
      },
      checked: [],
      searchChecked: "",
      checkedArr: [],
      checkAll: [],
      inverse: [],
      searchCheckedList: [],
      currentRow: -1,
      currentCell: -1,
      checkedList: {},
      checkedOldList: {},
      rangeLabel: "",
      inpVal: "",
      inpValWords: "",
      timer: null,
      search: false,
      map: {
        text: "key",
        value: "key",
      },
      screenFlag: false,
      searchFlag: false,
      highlightedContent: "",
      dataInfo: {},
      keywords: [],
      knowledgeIndex: -1,
      watermark: this.$store.state.user.id + this.$store.state.user.name,
    };
  },
  computed: {},
  onLoad(options) {
    this.info = JSON.parse(options.info);
	if(this.info){
		this.info.like = 0
		this.info.likeNumber = 0
		this.info.collectNumber = 0
		this.info.collect = 0
	}
    this.screenFlag = false;
    this.showCollects = !options.showCollects;
    this.search = options.search == "true" ? true : false;
    if (this.search == true) {
      this.items = this.info.ext.items;
      this.keywords = this.info.ext.items[0].text.split(",");
      this.knowledgeIndex = 0;
    }
    console.log("看看文件信息", this.info);
    this.getJson();
    this.getPreview();
  },
  watch: {
    inpVal: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          clearTimeout(this.timer);
          this.timer = setTimeout(() => {
            this.checkedFilter(newVal);
          }, 600);
        }
      },
    },
    inpValWords: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.searchChecked = "";
          clearTimeout(this.timer);
          this.timer = setTimeout(() => {
            this.getSearchCheckedList();
          }, 1000);
        }
      },
    },
  },
  mounted() {},
  methods: {
    openPopup() {
      this.show = true;
    },
    openSearchPopup() {
      this.showSearch = true;
    },
    closePopup() {
      this.show = false;
    },
    closeSearchPopup() {
      this.showSearch = false;
      this.inpValWords = "";
        this.searchChecked = ''
        this.currentCell = -1
    },
    previewImage(url) {
      uni.previewImage({
        current: 0, // 当前显示图片的索引
        urls: [url], // 需要预览的图片列表
      });
    },
    emptyFn() {
      this.inpVal = "";
      this.checkAll = [];
      this.inverse = [];
      this.checked = [];
      this.checkedArr = [];
      this.checkedList = [];
      this.checkedOldList = {};
      this.rangeValue = null;
      this.show = false;
      this.screenFlag = false;
      this.rangeLabel = "";
      this.sureFn();
    },
    sureFn() {
      this.$request({
        url: "/knowledgeData/getSearchJson",
        method: "post",
        data: {
          id: this.info.id,
          filterList: this.checked,
          // search: this.value,
          title: this.rangeLabel,
        },
      }).then(({ data }) => {
          this.show = false
          if (this.checked && this.checked.length > 0) {
              this.screenFlag = true
          } else {
              this.screenFlag = false
          }
          this.jsonData = JSON.parse(data.videoJson)
          this.rowParagraphs = this.jsonData.content[0].row_paragraphs
          this.rowParagraphs = this.rowParagraphs.map((temp, index) => {
              return {
                  ...temp,
                  isOpen: true
              }
          })
      });
    },
    handleLight() {
      // this.showSearch = false
      this.$nextTick(() => {
        this.searchCheckedList.forEach((item, index) => {
          if (item.id + item.row + item.cell === this.searchChecked) {
            this.currentRow = item.row;
            this.currentCell = item.cell;
          }
        });
        this.rowParagraphs = this.rowParagraphs.map((temp, index) => {
          return {
              ...temp,
              // isOpen: index === this.currentRow,
              isOpen: index === this.currentRow ? true : temp.isOpen
          };
        });
        setTimeout(() => {
          const fifthItem = document.getElementsByClassName("uni-card-table");
          fifthItem[this.currentRow].scrollIntoView({ behavior: "smooth" });
        }, 0);
        // this.showSearch = false
      });
    },

    getPreview() {
      // this.$modal.loading("正在加载中···");
      let that = this;
      this.$request({
        url: "/knowledgeData/getJson", //    this.QA ? '/file/getUrl' : '/knowledgeData/preview'
        method: "get",
        params: {
          id: this.info.id,
        },
      }).then(({ data }) => {
        if (!data.readAuthority) {
          this.$toast("当前文件未发布，不可预览");
          return;
        }
    //     setTimeout(()=> {
    //    this.$nextTick(()=>{
		//     this.knowledgeFn(this.info.ext.items[0], 0);
	  //  })
    //     }, data.fileSize < 2 ? 2000  : data.fileSize * 3000)
        console.log("查看数据", JSON.parse(data.videoJson));
        this.dataInfo = JSON.parse(data.videoJson);
        this.$request({
          url: "/knowledgeData/addView",
          method: "post",
          data: {
            id: this.info.id,
          },
        }).then(({ data }) => {
			this.info.like = data.like
			this.info.likeNumber = data.likeNumber
			this.info.collectNumber = data.collectNumber
			this.info.collect = data.collect
		});
      });
    },
    getJson() {
      this.$request({
        url: "/knowledgeData/video/verification",
        method: "get",
        params: {
          id: this.info.id,
        },
      }).then(({ data }) => {
        this.jsonData = JSON.parse(data.videoJson);
        this.headerArray = data.headerArray;
        this.filterFn(data.headerArray);
      });
    },
    filterFn() {
        let arr = []
        this.headerArray.forEach((item, index) => {
            arr.push({
                value: index,
                text: item.name
            })
        })
        this.range = arr
        this.rowParagraphs = this.jsonData.content[0].row_paragraphs
        this.rowParagraphs = this.rowParagraphs.map((temp, index) => {
            return {
                ...temp,
                isOpen: true
            }
        })
    },
    collectionFn(item) {
      let url = item.collect === 1 ? "/knowledgeCollect/delete    " : "/knowledgeCollect/add";
      this.$request({
        url: url,
        method: "post",
        data: {
          collectType: "2",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.collect === 1) {
          this.$toast("取消收藏");
          this.info.collect = 0;
          this.info.collectNumber--;
        } else {
          this.$toast("已收藏");
          this.info.collect = 1;
          this.info.collectNumber++;
        }
        console.log("info===", this.info);
        this.$forceUpdate();
      });
    },
    likeFn(item) {
      let url = item.like === 1 ? "/knowledgeCollect/delete    " : "/knowledgeCollect/add";
      this.$request({
        url: url,
        method: "post",
        data: {
          collectType: "1",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.like === 1) {
          this.$toast("取消点赞");
          this.info.like = 0;
          this.info.likeNumber--;
        } else {
          this.$toast("已点赞");
          this.info.like = 1;
          this.info.likeNumber++;
        }
        console.log("info===", this.info);
        this.$forceUpdate();
      });
    },
    knowledgeFn(item, index) {
      this.$nextTick(() => {
        this.knowledgeIndex = index;
        this.keywords = item.text.split(",")[0];
        this.showRight = false;
        console.log("knowledge", this.keywords, index, "-=-=-", item);
          /*this.rowParagraphs = this.rowParagraphs.map((temp, index) => {
            return {
              ...temp,
              isOpen: index === item.page_start_num,
            };
          });*/
        setTimeout(() => {
          const fifthItem = document.getElementsByClassName("uni-card-table");
          fifthItem[item.page_start_num].scrollIntoView({ behavior: "smooth" });
        }, 0);
      });
      // this.keywordsFn();
    },
    keywordsFn() {
      const pageContent = document.querySelector(".mainContent").innerHTML;
      // console.log("查看对应文本", pageContent.indexOf('顺序1'))
      this.keywordIndex = pageContent.indexOf(this.keywords);

      const regex = new RegExp(this.keywords, "g");
      this.highlightedContent = pageContent.replace(regex, (match) => {
        return `<uni-text class="highlight" style="background:yellow">${match}</uni-text>`;
      });

      console.log(this.highlightedContent, "fffff");
      if (this.keywordIndex !== -1) {
        this.scrollToKeyword();
      }
    },
    // 下拉列表选择
    filterRowParagraphs() {
      this.checked = [];
      this.checkAll = [];
      this.inverse = [];
      this.range.forEach((item) => {
        if (item.value === this.rangeValue) {
          this.rangeLabel = item.text;
        }
      });
      this.checkedList = this.headerArray[this.rangeValue].count;
      this.checkedOldList = JSON.parse(JSON.stringify(this.checkedList));
      //如果输入框有值 需要关联检索
      // this.$nextTick( () => {
      if (this.inpVal) {
        this.checkedFilter(this.inpVal);
      }
      // })
    },

    getSearchCheckedList() {
      if (!this.inpValWords) {
        this.searchCheckedList = [];
        return;
      }
      this.isLoading = true;
      this.$request({
        url: "/knowledgeData/getSearchJson",
        method: "post",
        data: {
          search: this.inpValWords,
          id: this.info.id,
          filterList: this.checked,
          title: this.rangeLabel,
        },
      })
        .then(({ data }) => {
          this.isLoading = false;
          this.searchCheckedList = data.searchList;
        })
        .catch(() => {
          this.isLoading = false;
        });
    },
    checkedFilter(keyword) {
      let checked = JSON.parse(JSON.stringify(this.checked));
      // this.checked = []
      if (!keyword) {
        console.log("看看已经选中的数据====>", checked);
        this.checkedList = JSON.parse(JSON.stringify(this.checkedOldList));
        this.$nextTick(() => {
          this.checked = this.checkedArr.concat(checked);
          if (this.checked && this.checked.length > 0 && this.isSubArray(Object.keys(this.checkedList), this.checked)) {
            this.checkAll = ["1"];
          }
        });
        return;
      }
      const filteredData = {};
      for (const key in this.checkedList) {
        if (key.includes(keyword)) {
          filteredData[key] = this.checkedList[key];
        }
      }
      this.checkedList = filteredData;
      this.$nextTick(() => {
        console.log(this.checkedArr, this.checked, "fffffsssss");
        this.checkedArr = this.checkedArr.concat(checked);
        this.checked = checked;
        if (this.checked && this.checked.length > 0 && this.isSubArray(Object.keys(this.checkedList), this.checked)) {
          this.checkAll = ["1"];
        }
      });
    },
    isSubArray(subArray, mainArray) {
      const mainSet = new Set(mainArray);
      return subArray.every((element) => mainSet.has(element));
    },
    inputChange(e) {
      this.checkAll = [];
      this.inverse = [];
    },
    //全选
    handleCheckAll() {
      setTimeout(() => {
        this.inverse = [];
        // this.$forceUpdate();
      });

      if (this.checkAll.toString() === "1") {
        this.checked = [];
      } else {
        Object.keys(this.checkedList).forEach((key) => {
          this.checked.push(key);
        });
      }
    },
    //反选
    handleInverse() {
      setTimeout(() => {
        this.checkAll = [];
        // this.$forceUpdate();
      });

      let temp = [];
      Object.keys(this.checkedList).forEach((key) => {
        if (!this.checked.some((item) => item === key)) {
          temp.push(key);
        }
      });
        this.checked = temp
        this.handleCheckedLists()
    },
      handleCheckedLists(e) {
          console.log('看看选中的', e)
          if (e == []) {
              setTimeout(() => {
                  this.checked = []
                  this.checkedArr = []
              }, 200)
          }
          this.$nextTick(() => {
              if (this.checked.length === Object.keys(this.checkedList).length) {
                  this.checkAll = ['1'] //全选
              } else {
                  /*else if (this.checked.length < this.checkedList.length && this.checked.length > 0) {
                                this.checkAll = []//半选
                            }*/
                  this.checkAll = [] //不选
              }
          })
      },
      handleCheckedList(params, key) {
          console.log('单行点击', params, key)
          if (!params) {
              console.log('旧数据', this.checked)
              this.checkedArr = this.checkedArr.filter(item => item !== key)
          }
      },
      changeMore(item) {
          console.log('切换', item.isOpen)
          this.$set(item, 'isOpen', !item.isOpen)
      },
      rightPopup() {
          console.log('ffff')
          this.showRight = true
      },
      closeFn() {
          this.showRight = false
    },
    openFn() {
      // this.show = false
    },
  },
};
</script>

<style lang="scss" scoped>
.pdf-preview {
  padding: 30rpx 0;
  position: relative;

  .rightScreen {
    position: fixed;
    width: 36rpx;
    height: 36rpx;
    top: 26rpx;
    right: 26rpx;
    z-index: 999;

    & + .rightScreen {
      width: 36rpx;
      height: 36rpx;
      right: 102rpx;
    }
  }

  ::v-deep .u-checkbox > uni-text {
    line-height: 40rpx !important;
    color: #1c2126 !important;
    font-family: 思源黑体 !important;
    font-size: 30rpx !important;
  }

  ::v-deep .uni-scroll-view {
    overflow: auto !important;
  }

  ::v-deep .uni-card--border {
    border: none;
  }

  ::v-deep .uni-card .uni-card__content {
    padding: 0 !important;
    background: white;
  }

  .uni-card-table {
    margin: 0 30rpx 30rpx !important;
    padding: 0 !important;
    //min-height: 220rpx;
    border-radius: 16rpx;
  }

  .table-row {
    line-height: 100rpx;
    min-height: 100rpx;
    margin: 0 30rpx;
    display: flex;
    align-items: flex-start;

    & + .table-row {
      border-bottom: 2rpx solid #e4e4e4;
    }
    &:last-child {
      border-bottom: none;
    }

    .table-label {
      font-family: 思源黑体;
      font-size: 30rpx;
      font-weight: normal;
      letter-spacing: 0rpx;
      color: #4c5a67;
      width: 190rpx;
      min-width: 190rpx;
      line-height: 40rpx;
      padding: 30rpx 10rpx 30rpx 0;
    }

    .table-content {
      word-break: break-all;
      text-align: justify;
      font-family: 思源黑体;
      font-size: 30rpx;
      font-weight: normal;
      line-height: 40rpx;
      letter-spacing: 0px;
      color: #1c2126;
      padding: 30rpx 0;
      &.lightColor {
        color: #008fff;
      }

      image {
        width: 320rpx;
        height: 180rpx;
      }
    }

    .table-more {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;

      ::v-deep .u-icon {
        margin-left: 26rpx;
      }
    }
    &.table_sort {
      height: 100rpx;
      margin: 0;
      border-radius: 16rpx 16rpx 0 0;
      background: linear-gradient(180deg, rgba(0, 132, 255, 0.15) 0%, rgba(131, 189, 245, 0.15) 100%);
      display: grid;
      align-items: center;
      grid-template-columns: 44rpx 1fr 150rpx;
      grid-column-gap: 20rpx;
      padding: 0 30rpx;
      .table-content {
        font-family: Source Han Sans;
        font-size: 32rpx;
        font-weight: 500;
        color: #1c2126;
      }
      .table_icon {
        width: 44rpx;
        height: 44rpx;
      }
      .table_blue,
      .table_gray {
        width: 32rpx;
        height: 32rpx;
      }
      .table-btn {
        width: 150rpx;
        height: 54rpx;
        border-radius: 40rpx;
        background: rgba(255, 255, 255, 0.4);
        border: 2rpx solid #ffffff;
        font-family: Source Han Sans;
        font-size: 30rpx;
        font-weight: 500;
        display: grid;
        grid-template-columns: 1fr 56rpx;
        align-items: center;
        justify-content: center;
        text {
          line-height: 1;
          text-align: center;
        }
      }
    }
    &.table-row-image {
      flex-direction: column;
      .table-content {
        width: 100%;
        padding-top: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        flex-wrap: nowrap;
        image {
          border-radius: 8rpx;
          width: 214rpx;
          min-width: 214rpx;
          margin-right: 20rpx;
        }
      }
    }
  }
}

.popupTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 104rpx;
  margin: 0 30rpx;
  font-family: Source Han Sans;
  font-size: 32rpx;
  font-weight: 500;
}

.popupCon {
  margin: 0 30rpx;
  padding: 30rpx 0;
  /*display: grid;
    place-items: 30rpx;
    grid-template-columns: 1fr;
    row-gap: 40rpx;*/
  border-top: 1rpx solid #d8d8d8;
  border-bottom: 1rpx solid #d8d8d8;
  min-height: 400rpx;
  font-family: 思源黑体;
  font-size: 30rpx;
  ::v-deep {
    .uni-easyinput__placeholder-class,
    .uni-input-input,
    .uni-select__input-placeholder,
    .uni-select__input-text,
    .uni-select__selector-item {
      font-family: 思源黑体;
      font-size: 30rpx;
    }
  }
  .input-with-select {
    display: inline-grid;
    column-gap: 20rpx;
    grid-template-columns: 1fr 2fr;
    width: 100%;

    ::v-deep .uni-select__selector-item {
      white-space: nowrap;
    }
  }

  .u-checkbox {
    margin: 20rpx 0;
  }

  .checkboxTop {
    display: inline-grid;
    grid-column-gap: 20rpx;
    width: 100%;
    grid-template-columns: 120rpx 120rpx;
    border-bottom: 1rpx solid #d8d8d8;
  }

  .checkboxBottom {
    max-height: calc(50vh - 100rpx);
    overflow-y: auto;
  }
}

.bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 32rpx 50rpx;
  column-gap: 30rpx;
  font-family: Poppins;
  font-size: 32rpx;
  font-weight: 600;
}
.icon {
  position: fixed;
  right: 0;
  top: calc(50% - 83rpx);
  z-index: 999;
  width: 56rpx;
  height: 166rpx;
}

.keywords {
  ::v-deep .u-popup__content {
    background: transparent;
  }

  .model {
    width: 434rpx;
    min-height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    padding: 0 24rpx;
    font-family: 思源黑体;
    font-size: 30rpx;
    word-break: break-all;
    text-align: justify;
    //margin: 24rpx;
    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 20rpx;
      min-width: 32rpx;
    }
    &.model-title {
      position: relative;
      color: #0084ff;
      //border-bottom: 1rpx solid #D8D8D8;
      &:before {
        content: "";
        width: calc(100% - 48rpx);
        height: 1rpx;
        position: absolute;
        left: 24rpx;
        right: 24rpx;
        bottom: 0;
        background: #d8d8d8;
      }
      &:hover {
        background: #ffffff;
      }
    }

    &.active {
      background: #e8f8ff;
    }
    &:hover {
      background: #e8f8ff;
    }
  }

  .scroll_view {
    height: calc(100vh - 80rpx);
    overflow-y: auto;
  }

  .keyword {
    display: grid;
    grid-template-columns: 56rpx 1fr;
    width: 100%;
    height: 100%;
    view.image {
      width: 56rpx;
      height: 100%;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    view.content {
      background: #ffffff;
    }
    .image {
      width: 100%;
      margin: 20rpx 0 0;
    }
  }
}
.search_u_popup {
  ::v-deep {
    .u-popup__content {
      box-shadow: 0 -10rpx 20rpx 0 rgba(0, 0, 0, 0.05);
    }
    .popupCon .checkboxBottom {
      max-height: calc(40vh - 55px);
    }

    .u-radio {
      line-height: 2;
    }

    .u-fade-enter-active {
      background: transparent !important;
    }
  }
}

.collect_or_likes {
  height: 88rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 99;
  background: #ffffff;

  .collect_or_like {
    width: 100%;
    height: 100%;
    font-family: Source Han Sans;
    font-size: 30rpx;
    color: #3d3d3d;
    font-weight: normal;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 32rpx;
      height: 27rpx;
      margin: 0 20rpx 0 30rpx;
    }

    & + .collect_or_like {
      border-left: 2rpx solid #dcdee1;

      image {
        height: 32rpx;
      }
    }
  }
}
</style>
